<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="line1 clear">
        <div class="keys in-line1">
            <p class="key-name clear">Q</p>
            <p class="vowel">q</p>
            <p class="vowel">iu</p>
        </div>
        <div class="keys in-line1">
            <p class="key-name clear">W</p>
            <p class="vowel">w</p>
            <p class="vowel">ia</p>
            <p class="vowel">ua</p>
        </div>
        <div class="keys in-line1">
            <p class="key-name clear">E</p>
            <p class="vowel">&nbsp;</p>
            <p class="vowel">e</p>
        </div>
        <div class="keys in-line1">
            <p class="key-name clear">R</p>
            <p class="vowel">r</p>
            <p class="vowel">uan</p>
            <p class="vowel">er</p>
        </div>
        <div class="keys in-line1">
            <p class="key-name clear">T</p>
            <p class="vowel">t</p>
            <p class="vowel">üe</p>
        </div>
        <div class="keys in-line1">
            <p class="key-name clear">Y</p>
            <p class="vowel">y</p>
            <p class="vowel">uai</p>
            <p class="vowel">ü</p>
        </div>
        <div class="keys in-line1">
            <p class="key-name clear">U</p>
            <p class="initial-consonant">sh</p>
            <p class="vowel">u</p>
        </div>
        <div class="keys in-line1">
            <p class="key-name clear">I</p>
            <p class="initial-consonant">ch</p>
            <p class="vowel">i</p>
        </div>
        <div class="keys in-line1">
            <p class="key-name clear">O</p>
            <p class="vowel">*</p>
            <p class="vowel">o</p>
            <p class="vowel">uo</p>
        </div>
        <div class="keys in-line1">
            <p class="key-name clear">P</p>
            <p class="vowel">p</p>
            <p class="vowel">un</p>
        </div>
    </div>
    <div class="line2 clear">
        <div class="keys in-line2">
            <p class="key-name clear">A</p>
            <p class="vowel">&nbsp;</p>
            <p class="vowel">a</p>
        </div>
        <div class="keys in-line2">
            <p class="key-name clear">S</p>
            <p class="vowel">s</p>
            <p class="vowel">ong</p>
            <p class="vowel">iong</p>
        </div>
        <div class="keys in-line2">
            <p class="key-name clear">D</p>
            <p class="vowel">d</p>
            <p class="vowel">uang</p>
            <p class="vowel">iang</p>
        </div>
        <div class="keys in-line2">
            <p class="key-name clear">F</p>
            <p class="vowel">f</p>
            <p class="vowel">en</p>
        </div>
        <div class="keys in-line2">
            <p class="key-name clear">G</p>
            <p class="vowel">g</p>
            <p class="vowel">eng</p>
        </div>
        <div class="keys in-line2">
            <p class="key-name clear">H</p>
            <p class="vowel">h</p>
            <p class="vowel">ang</p>
        </div>
        <div class="keys in-line2">
            <p class="key-name clear">J</p>
            <p class="vowel">j</p>
            <p class="vowel">an</p>
        </div>
        <div class="keys in-line2">
            <p class="key-name clear">K</p>
            <p class="vowel">k</p>
            <p class="vowel">ao</p>
        </div>
        <div class="keys in-line2">
            <p class="key-name clear">L</p>
            <p class="vowel">l</p>
            <p class="vowel">ai</p>
        </div>
        <div class="keys in-line2">
            <p class="key-name clear">;</p>
            <p class="vowel">&nbsp;</p>
            <p class="vowel">ing</p>
        </div>
    </div>
    <div class="line3 clear">
        <div class="keys in-line3">
            <p class="key-name clear">Z</p>
            <p class="vowel">z</p>
            <p class="vowel">ei</p>
        </div>
        <div class="keys in-line3">
            <p class="key-name clear">X</p>
            <p class="vowel">x</p>
            <p class="vowel">ie</p>
        </div>
        <div class="keys in-line3">
            <p class="key-name clear">C</p>
            <p class="vowel">c</p>
            <p class="vowel">iao</p>
        </div>
        <div class="keys in-line3">
            <p class="key-name clear">V</p>
            <p class="initial-consonant">zh</p>
            <p class="vowel">ui</p>
            <p class="vowel">üe</p>
        </div>
        <div class="keys in-line3">
            <p class="key-name clear">B</p>
            <p class="vowel">b</p>
            <p class="vowel">ou</p>
        </div>
        <div class="keys in-line3">
            <p class="key-name clear">N</p>
            <p class="vowel">n</p>
            <p class="vowel">in</p>
        </div>
        <div class="keys in-line3">
            <p class="key-name clear">M</p>
            <p class="vowel">m</p>
            <p class="vowel">ian</p>
        </div>
    </div>


</body>

</html>